<template>
  <el-drawer v-model="drawer" @closed="closed">
    <!-- 标题部分 -->
    <template #header>
      <h4>{{ edit ? $t('operation.edit'): $t('operation.add') }}</h4>
    </template>
    <template #default>
      <el-form
        ref="form"
        :model="formParams"
        :rules="rules"
        label-width="100px"
      >
          <el-form-item :label="$t('boat.model')" prop="vesselsId">
            <el-select
              v-model="formParams.vesselsId"
              :placeholder="$t('operation.select')"
              size="large"
              style="width: 220px;"
              filterable
              @change="change"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.model"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('boat.user')" prop="customerId">
            <el-select
              v-model="formParams.customerId"
              :placeholder="$t('operation.select')"
              size="large"
              style="width: 220px;"
              filterable
              @change="change"
            >
              <el-option
                v-for="item in members"
                :key="item.id"
                :label="item.customerFirstName + ' ' + item.customerLastName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

        <el-form-item :label="$t('boat.repaireMoney')" prop="maintainAmount">
          <el-input-number :placeholder="$t('boat.repaireMoney')" v-model="formParams.maintainAmount" :min="1" />
        </el-form-item>
        <el-form-item :label="$t('boat.repaireTime')" prop="maintainDate">
          <el-date-picker
            v-model="formParams.maintainDate"
            type="datetime"
            :placeholder="$t('boat.repaireTime')"
            format="DD/MM/YYYY HH:mm:ss"
            value-format="DD/MM/YYYY HH:mm:ss"
          />
        </el-form-item>
        <el-form-item :label="$t('boat.vscode')" prop="vesselsCode">
          <el-select
              v-model="formParams.vesselsCode"
              :placeholder="$t('operation.select')"
              size="large"
              style="width: 220px;"
              filterable
              @change="change"
            >
              <el-option
                v-for="item in codes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('boat.repaireMan')" prop="maintainPerson">
          <el-input
            :placeholder="$t('boat.repaireMan')"
            v-model="formParams.maintainPerson"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('boat.repairePlace')" prop="maintainPlace">
          <el-input
            :placeholder="$t('boat.repairePlace')"
            v-model="formParams.maintainPlace"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('boat.abdoc')" prop="documentUrl">
            <file-upload v-model="formParams.documentUrl" />
        </el-form-item>
        <!-- <el-form-item label="图标">
                    <el-input placeholder="图标" v-model="formParams.icon"></el-input>
                </el-form-item> -->
        <el-form-item :label="$t('boat.des')">
          <el-input
            type="textarea"
            :placeholder="$t('boat.des')"
            v-model="formParams.depict"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            size="default"
            @click="save"
          >
            {{ $t('operation.save') }}
          </el-button>
          <el-button type="primary" size="default" @click="drawer = false">
            {{ $t('operation.cancel') }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { repaireAdd, repaireEdit } from '@/api/boat/repaire'
import { ElMessage } from 'element-plus'
import { typeArr } from './type'
import { vesselsGetAll } from '@/api/boat/basic'
import { customerGetAll } from '@/api/seek_member/member'
import { codeGetAll } from '@/api/boat/vesscode'

let props = defineProps(['list']) //数组|对象写法都可以

onMounted(async () => {
  getBoats()
  getMembers()
  getCodes()
})

let list = ref([])
const getBoats = async () => {
  let { status, data, msg } = await vesselsGetAll()
  if (status == 200) {
    list.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}

let members = ref([])
const getMembers = async () => {
  let { status, data, msg } = await customerGetAll()
  if (status == 200) {
    members.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}

let codes = ref([])
const getCodes = async () => {
  let { status, data, msg } = await codeGetAll({VesselsCode: ''})
  if (status == 200) {
    codes.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}

const defaultForm = {
  id: '',
  vesselsId: '',
  customerId: '',
  maintainAmount: '',
  maintainDate: '',
  vesselsCode: '',
  maintainPerson: '',
  maintainPlace: '',
  depict: '',
  documentUrl: '',
}

let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  vesselsId: [{ required: true, message: '请选择', trigger: 'blur' }],
  customerId: [{ required: true, message: '请选择', trigger: 'blur' }],
  maintainAmount: [{ required: true, message: '请输入', trigger: 'blur' }],
  // maintainDate: [
  //   { required: true, type: 'number', message: '请选择', trigger: 'blur' },
  // ],
  vesselsCode: [{ required: true, message: '请输入', trigger: 'blur' }],
}

let drawer = ref(false)
let edit = ref(false)

const show = (row) => {
  if (row) {
    edit.value = true

    Object.keys(formParams).forEach((key) => {
      formParams[key] = row[key]
    })
    if (!formParams.parentId) {
      formParams.parentId = ''
    }
  } else {
    edit.value = false
  }
  drawer.value = true
}

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  try {
    
    let result: any
    if (edit.value) {
      result = await repaireEdit(formParams)
    } else {
      result = await repaireAdd(formParams)
    }
    loading.value = false
    if (result.status == 200) {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      drawer.value = false
      $emit('callback')
    } else {
      ElMessage({
        type: 'error',
        message: '操作失败',
      })
    }
  } catch (error) {
    loading.value = false
  }
}

const closed = () => {
  Object.assign(formParams, defaultForm)
}

const update = (e) => {
  formParams.url = e
}

const treeSelect = (e) => {
  // formParams.parentId = e.permissionId
  // console.log(formParams.parentId);
}

//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  show,
})
//自定义事件的方法
let $emit = defineEmits(['callback'])
</script>
